<template>
  <view>
    <u-subsection :list="list" fontSize="18" :current="curNow" @change="sectionChange"></u-subsection>
    <view class="activity">
      <view class="item" v-for="item in activitylist" :key="item.id">
        <view class="badget">
          <u-tag text="受理中" size="mini" type="primary" v-if="item.status == 1"></u-tag>
          <u-tag text="未通过" size="mini" type="error" v-else-if="item.status == 0"></u-tag>
          <u-tag text="已通过" size="mini" type="success" v-else="item.status == 2"></u-tag>
        </view>
        <!-- 活动的展示图 -->
        <view class="img" @click="gotoDetail(item.activityId)">
          <view class="activity-text">
            {{item.title}}
          </view>
        </view>
        <!-- 活动的时间 -->
        <view class="text">
          <span>{{item.time}}</span>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        list: ['全部', '受理中', '未通过', '已通过'],
        // 或者如下，也可以配置keyName参数修改对象键名
        // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
        curNow: 0,
        // 用来存放活动数据的数组
        activitylist: [],
        volunteerId: 0
      };
    },
    computed: {
      ...mapState("m_volunteer", ["volunteerInfo"])
    },
    onLoad() {

    },
    mounted() {
      // 获取志愿者的id
      const {
        id
      } = this.volunteerInfo
      this.volunteerId = id
      this.getAll()
    },
    methods: {
      sectionChange(index) {
        this.curNow = index;
        if (index === 0) {
          this.getAll()
        } else {
          if (index === 1) {
            this.activitylist = []
            this.getLoading()
          } else {
            if (index === 2) {
              this.activitylist = []
              this.getNoPass()
            } else {
              if (index === 3) {
                this.activitylist = []
                this.getGoing()
              }
            }
          }
        }
      },
      // 所有活动
      async getAll() {
        const {
          data: res
        } = await uni.$http.get(`/reservation/all/${this.volunteerId}`)
        this.activitylist = res.data
      },
      // 活动审核中
      async getLoading() {
        const {
          data: res
        } = await uni.$http.get(`/reservation/${this.volunteerId}/1`)
        if (res.code !== 200) return this.$showMsg("数据获取异常")
        this.activitylist = res.data
      },
      // 活动通过
      async getGoing() {
        const {
          data: res
        } = await uni.$http.get(`/reservation/${this.volunteerId}/2`)
        if (res.code !== 200) return this.$showMsg("数据获取异常")
        this.activitylist = res.data
      },
      // 活动未通过
      async getNoPass() {
        const {
          data: res
        } = await uni.$http.get(`/reservation/${this.volunteerId}/0`)
        if (res.code !== 200) return this.$showMsg("数据获取异常")
        this.activitylist = res.data
      },
      // 跳转到活动详情页面
      gotoDetail(activityId){
        uni.navigateTo({
          url:"/subpkg/activity-detail/activity-detail?id="+activityId,
        })
      }
    }
  }
</script>

<style lang="scss">
  .activity {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;

    .item {
      position: relative;
      margin: 5px;
      width: calc(46%);
      height: 100px;
      border: 1px;
      box-shadow: 1px 1px 1px 1px gray;
      display: flex;
      flex-direction: column;

      .img {
        width: 100%;
        height: 80%;
        // 背景
        background-image: url('https://img-qn.51miz.com/preview/element/00/01/05/28/E-1052800-57BA7D89.jpg');
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;

        .img-item {
          width: 100%;
          height: 100%;
          display: block;
        }

        .activity-text {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0 10px;
          font-weight: 700;
          color: white;
        }
      }

      .text {
        width: 100%;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: lightcyan;
      }
    }

    .badget {
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .middle {}
</style>